<template>
    <div class="container">
        <div class="row">
            <div class="col-4"></div>
            <div class="col-4">
                <img class="logo" src="../assets/logo.svg" alt="">
                <h1>华杉商城系统登录</h1>
                <!-- 登录逻辑 -->
                <form>
                    <div class="form-group row">
                        <label for="staticEmail" class="col-sm-2 col-form-label">账号</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control" id="staticEmail" value="" placeholder="请输入账号">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
                        <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
                        </div>
                    </div>
                    <button @click="onLogin" type="button" class="btn btn-warning btn-lg btn-block">确 定</button>
                    <button @click="changePwd" type="button" class="btn btn-warning btn-lg btn-block">修改密码</button>
                </form>
            </div>
            
        </div>
    </div>
</template>

<script setup>
import { RouterLink,useRouter } from 'vue-router';
import { showSuccessToast } from 'vant';
import axios from 'axios';


const router = useRouter();

const changePwd = () => {
    axios({
        //静态服务器json地址
        // url:"/login.json",
        //mock地址
        url:"/api/changepwd",
        method:"post"
    })
    .then((res) => {
        console.log(res);
        showSuccessToast('修改成功！');
    });

};
const onLogin = () => {
 
    // console.log(axios);
    axios({
        //静态服务器json地址
        // url:"/login.json",
        //mock地址
        url:"/api/login",
        method:"post"
    })
    .then((res) => {
        console.log(res);
        showSuccessToast('登录成功！');
        router.push("/index");
    });

};

</script>

<style scoped>
.container{
    text-align: center;
}
.logo{
    height: 50px;
    margin-bottom: 25px;
    margin-top: 70px
}
h1{
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 41px;
}
.btn-warning{
    color: #fff;
}
.btn-warning{
    margin-top: 50px;
}
</style>